<template>
    <div>
        <!--商机信息-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 140px">
            <!--上-->
            <div>
                <el-row :gutter="20" style="height:41px">
                    <el-col :span="6" style="padding-top: 5px">
                        <i class="el-icon-s-check" style="padding-left: 0px;font-size: 25px;"></i>
                        <span style="font-weight: bold;font-size: 18px;margin-left: 10px">交付计划详情</span>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <el-button class="el-icon-edit" style="margin-left: 100px">编辑</el-button>
                        <el-button class="el-icon-back">返回</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--下-->
            <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                <div style="height: 150px;margin-left: 10px;color: #BFBFBF">
                    <el-row type="flex" :gutter="20" style="margin-top: 20px">
                        <el-col :span="2">
                            <span style="color: gray">主题：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{this.thdlist.deliveryTheme}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">状态：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{this.thdlist.deliveryStatic}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" style="margin-top: 15px">
                        <el-col :span="2">
                            <span style="color: gray">对应客户：</span>
                        </el-col>
                        <el-col :span="10">
                            <span style="color: black">{{this.thdlist.clientId.clientName}}</span>
                        </el-col>
                        <el-col :span="2">
                            <span style="color: gray">对应订单：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{this.thdlist.orderId.orderTheme}}</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!--进度详情-->
        <div style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: white;">
            <div>
                <template>
                    <el-tabs v-model="activeName2" type="card">
                        <el-tab-pane label="基本信息" name="first" style="height: 410px;">
                            <div class="shugan" style="margin-left: 20px;"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <el-form v-model="thdlist" style="margin-left: 20px;" :label-position="labelPosition" >
                                <div>
                                    <div style="height: 150px;margin-left: 10px;">
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">产品金额：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{this.thdlist.deliveryMoney}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">交付时间：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{this.thdlist.deliveryTime  | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">期次：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{this.thdlist.deliveryIssue}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">所有者：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{this.thdlist.deliveryOwner}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">备注：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{this.thdlist.deliveryRemark}}</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="计划详情" name="third" style="height: 380px;">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="thdxqlist"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    align="center"
                                                    prop="prodetailId.productName"
                                                    label="产品名称">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="产品规格">
                                                <template slot-scope="s">
                                                    <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                                        {{pro.modetContent}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="数量"
                                                    prop="deliverydeliveryNumber">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="交付条件"
                                                    prop="deliverydeliveryCondition">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="要求"
                                                    prop="deliverydeliveryRequire">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 840px;;font-size: 13px">
                                        <span>
                                            以下:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             100
                                        </span>
                                        <span>
                                            条订单:
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="交付记录" name="six2" style="height: 400px;">
                            <div>
                                <!--回款计划-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加回款计划-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" type="primary" plain>新增计划</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="tkjhlist"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    fixed
                                                    label="客户"
                                                    sortable
                                                    align="center">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="交付日期"
                                                    align="center">
                                                <template slot-scope="d">
                                                    {{d.row.deliverylogTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliverylogRecipient"
                                                    label="对方接收人"
                                                    align="center"
                                                    sortable>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliverylogNumber"
                                                    label="产品总金额"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="deliverylogRemark"
                                                    label="备注"
                                                    align="center">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 700px;;font-size: 13px">
                                        <span>
                                            已回款金额:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             30000元
                                        </span>
                                        <span>
                                            剩余
                                        </span>
                                        <span style="color: #BFBFBF">
                                             1064128.00元
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="开票记录" name="sex" style="height: 400px;">
                            <div>
                                <!--开票记录-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--添加记录-->
                                    <div>
                                        <el-button style="margin-left: 880px" size="small" type="primary" plain>新增记录</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="faplist"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    type="selection"
                                                    width="50"
                                                    align="center">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    prop="invoiceId"
                                                    label="ID"
                                                    sortable
                                                    align="center"
                                                    width="60">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceContent"
                                                    label="开票内容"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceType"
                                                    label="票据类型"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceMoney"
                                                    label="票据金额"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceNumber"
                                                    label="发票号码"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="开票日期"
                                                    align="center"
                                                    width="180">
                                                <template slot-scope="d">
                                                    {{d.row.invoiceTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoicePerson"
                                                    label="经手人"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="回款记录"
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.returnedmoneylogId.returnedmoneylogTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="invoiceRemark"
                                                    label="备注"
                                                    align="center"
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    fixed="right"
                                                    label="操作"
                                                    align="center"
                                                    width="100">
                                                <template slot-scope="d">
                                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                    <i style="font-size:18px;color: #409EFF" @click="xiugai(d.row)" class="el-icon-edit"></i>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 850px;;font-size: 13px">
                                        <span>
                                            已开发票:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             106个
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "ZtueihuoXq",
        data() {
            return {
                /*对齐方式*/
                labelPosition:'left',
                //退货单列表
                thdlist:{
                    deliveryId:0,
                    orderId:{
                        orderId:0,
                        clientId:null,
                        conId:null,
                        orderNo:null,
                        orderTheme:'',
                        orderTotal:null,
                        orderReturned:null,
                        orderInvoice:null,
                        orderGross:null,
                        orderTime:null,
                        orderWctime:null,
                        orderExchange:null,
                        orderReturn:null,
                        orderState:null,
                        orderRemark:null,
                        orderPeople:null,
                        orderZt:null,
                        zbartersByOrderId:null,
                        zdeliverylogsByOrderId:null,
                        zorderdetailsByOrderId:null
                    },
                    clientId:{
                        clientId:0,
                        updateTime:null,
                        clientIndustry:null,
                        clientSource:null,
                        clientUrl:null,
                        establishPerson:null,
                        establishTime:null,
                        clientName:'',
                        clientRank:null,
                        clientPhone:null,
                        clientMobile:null,
                        clientSite:null,
                        clientRemark:null,
                        clientPeople:null,
                        clientCjpeople:null,
                        clientState:0,
                        clientIffollowup:0,
                        clientSheng:null,
                        clientSz:null,
                        empId:null,
                        tfyclueFormsByClueId:null,
                        tfylinkmanFormsByClientId:null,
                        zbartersByClientId:null,
                        zcontractsByClientId:null,
                        zdeliverylogsByClientId:null,
                        zinvoicesByClientId:null,
                        zordersByClientId:null
                    },
                    deliveryMoney:0,
                    deliveryTime:'',
                    deliveryIssue:null,
                    deliveryOwner:null,
                    deliveryRemark:'',
                    deliveryTheme:'',
                    deliveryStatic:'',
                },
                //退货详情列表
                thdxqlist:[],
                //退款计划
                tkjhlist:[],
                //发票
                faplist:[],
                activeName2:"six2"
           }
        },
        methods: {
            //交付计划详情
            thdxqinitData() {
                this.$axios.get("http://localhost:8088/jf/list_jhxq",{params:{search:this.thdlist.deliveryId}})
                    .then(v=>{
                            this.thdxqlist = v.data;
                        }
                    ).catch()
            },
            //交付记录
            tkjhinitData() {
                this.$axios.get("http://localhost:8088/jfjl/list_xqjl",{params:{search:this.thdlist.deliveryId}})
                    .then(v=>{
                            this.tkjhlist = v.data;
                        }
                    ).catch()
            },
            //发货单
            fpinitData() {
                this.$axios.get("http://localhost:8088/vue/list_kaipiaothd",{params:{search:this.thdlist.returgoodId}})
                    .then(v=>{
                            this.faplist = v.data;
                        }
                    ).catch()
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            }
        },
        created: function () {
            if(this.$route.query.key!=null){
                this.thdlist=this.$route.query.key;
                this.thdxqinitData();
                this.fpinitData();
                this.tkjhinitData();
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd  hh:mm:ss");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 50px;
    }
</style>